<template>
  <div>
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      class="tableArea"
    >
      <el-table-column label="" prop="Zero" align="center"></el-table-column>
      <el-table-column label="" prop="One" align="center"></el-table-column>
      <el-table-column label="" prop="Two" align="center"></el-table-column>
      <el-table-column label="" prop="Three" align="center"></el-table-column>
      <!--      <el-table-column label="" prop="For" align="center"></el-table-column>-->
      <!--      <el-table-column label="" prop="Five" align="center"></el-table-column>-->
      <!--      <el-table-column label="" prop="Six" align="center"></el-table-column>-->
      <!--      <el-table-column label="" prop="Seven" align="center"></el-table-column>-->
    </el-table>
  </div>
</template>

import { myWaitingToDo } from '@/api/activity'

<script>
export default {
  name: 'MyWait',
  created () {
    this.tableData = [
      {
        Zero: "",
        One: "星期一",
        Two: "星期二",
        Three: "周三",
        For: "周四",
      },
      {
        Zero: "课时 1",
        One: "语文",
        Two: "数学",
        Three: "",
        For: ""
      },
      {
        Zero: "课时 2",
        One: "语文",
        Two: "数学",
        Three: "",
        For: ""
      },
      {
        Zero: "课时 3",
        One: "语文",
        Two: "体育",
        Three: "",
        For: ""
      },
      {
        Zero: "课时 4",
        One: "地理",
        Two: "体育",
        Three: "",
        For: ""
      },
      {
        Zero: "课时 5",
        One: "地理",
        Two: "体育",
        Three: "",
        For: ""
      }
    ]
    this.GetSpanArr()
  },
  data () {
    return {
      tableData:[],
      spanArr1: [],         //存放每一行记录的合并数
      spanArr2: [],         //存放每二行合并数
      position1: 0,         // spanArr1 的索引
      position2: 0          // spanArr2 的索引
    }
  },
  methods: {
    objectSpanMethod ({row,column,rowIndex,columnIndex}) {
      if (columnIndex === 1) {            //判断是否是第一行
        const _row = this.spanArr1[rowIndex];
        const _col = _row > 0 ? 1 : 0;    //1为不合并 0为合并至最后一列
        return {
          rowspan: _row,
          colspan: _col
        };
      }
      if (columnIndex === 2) {            //判断是否是第一行
        const _row = this.spanArr2[rowIndex];
        const _col = _row > 0 ? 1 : 0;    //1为不合并 0为合并至最后一列
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
    //处理数据
    GetSpanArr () {
      let data = this.tableData;
      data.forEach((element, index) => {    //遍历数据 得到每项 和下标
        if (index === 0) {                  //如果是一条数据 直接不合并
          this.spanArr1.push(1);            //记录合并数
          this.spanArr2.push(1);            //记录合并数
          this.position1 = 0;                //记录spanArr1的索引值
          this.position2 = 0;                //记录spanArr2的索引值
        } else {
          if (element.One === data[index - 1].One) {      //非第一条数据 则判断是否与上一条相邻的数据值相等
            this.spanArr1[this.position1] += 1;           //相等则说明需要合并 rousoan:2 = 合并一行
            this.spanArr1.push(0);                        //记录索引
          } else {
            this.spanArr1.push(1);                        //与上一单元格数据不相等 则不合并 rowspan:1 = 不合并
            this.position1 = index;                       //记录索引
          }
          if (element.Two === data[index - 1].Two) {      //非第一条数据 则判断是否与上一条相邻的数据值相等
            if (element.One === data[index - 1].One){
              this.spanArr2[this.position2] += 1;           //相等则说明需要合并 rousoan:2 = 合并一行
              this.spanArr2.push(0);                        //记录索引
            }else {
              this.spanArr2.push(1);                        //与上一单元格数据不相等 则不合并 rowspan:1 = 不合并
              this.position2 = index;                       //记录索引
            }
          } else {
            this.spanArr2.push(1);                        //与上一单元格数据不相等 则不合并 rowspan:1 = 不合并
            this.position2 = index;                       //记录索引
          }
        }
      });
    }
  }

}
</script>

<style scoped>

</style>
